<template>
  <div class="single-card-container">
    <!-- start 按钮组 -->
    <div class="btn-group" v-if="(showDeleteBtn || showCreateBtn || showEditBtn) && !shareData.isArchive">
      <el-button
        type="primary"
        size="mini"
        @click="openDialog"
        v-if="showCreateBtn || showEditBtn"
      >{{$t('common.base.edit')}}</el-button>
      <el-button
        v-if="isExport"
        @click="exportEvent"
        size="mini"
        type="plain-third"
      >{{$t('common.base.export')}}</el-button>
      <el-button
        type="plain-third"
        size="mini"
        v-if="showDeleteBtn"
        @click="deleteCard(cardInstanceId)"
      >{{$t('common.base.delete')}}</el-button>
    </div>

    <div class="btn-group" v-if="!((showDeleteBtn || showCreateBtn || showEditBtn) && !shareData.isArchive)">
      <el-button
        v-if="isExport"
        @click="exportEvent"
        type="plain-third"
      >{{$t('common.base.export')}}</el-button>
    </div>
    <!-- end 按钮组 -->
    
    <form-view class="form-view-two-column  bbx-cell-form-view" :fields="fields" :value="formValue" :form-cell-count="formCellCount">
     <!-- start 工单状态 -->
     <template slot="state" slot-scope="{ field }">
      <div class="form-view-row">
        <label>{{ field.displayName }}</label>
        <div class="form-view-row-content"> {{ stateText || ''}}</div>
      </div>
    </template>
    <!-- end 工单状态 -->

    <template slot="userName" slot-scope="{ field, value }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ field.displayName }}</label>
          <div class="form-view-row-content">
            <template v-if="isOpenData">
              <open-data type="userName" :openid="formValue.attribute && formValue.attribute.staffId"></open-data>
            </template>
            <template v-else>
              {{ value }}
            </template>
          </div>
        </div>
      </template>
      <!-- end 操作人 -->
      <!-- start 操作时间 -->
      <template slot="updateTime" slot-scope="{ field, value }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ field.displayName }}</label>
          <div class="form-view-row-content">{{ value | fmt_datetime }}</div>
        </div>
      </template>
      <!-- end 操作时间 -->
    </form-view>



    <!-- start 新增/编辑附加组件弹窗 -->
    <task-card-edit-dialog
      ref="taskCardEdit"
      :task="task"
      :fields="card.fields"
      :value.sync="value"
      :action="action"
      :inputType="card.inputType"
      @submit="submit"
      v-on="$listeners"
      @setServerDeleFiles="setServerDeleFiles"
      @getDeleteFiles="getDeleteFiles"
    />
    <!-- end 新增/编辑附加组件弹窗 -->
  </div>
</template>

<script>
/* mixin */
import cardMixin from './CardMixin.js';
import { isOpenData } from '@src/util/platform';
import { useFormTimezone } from 'pub-bbx-utils'
const { disposeFormViewTime } = useFormTimezone()
import _ from 'lodash';
import TaskStateEnum from '@model/enum/TaskStateEnum.ts';

export default {
  name: 'single-card',
  mixins: [cardMixin],
  props: {
    value: {
      type: Object,
      default: () => ({
        attribute: {}
      })
    },
    formCellCount: {
      type: Number,
      default: 1
    }
  },
  computed: {
    /**
    * @description 工单状态
    */
    stateText() {
      return TaskStateEnum.getNameForTask(this.formValue?.attribute || {});
    },
    formValue() {
      if(this.isFromCreated) return disposeFormViewTime(this.card.fields, {
        ...this.value,
        ...this.value.attribute
      } || {})
      
      return disposeFormViewTime(this.card.fields, this.value || {})
    },
    fields() {
      // 附加组件是关联工单并且开启展示系统字段处理
      const cardFields = _.cloneDeep(this.card.fields)
      const targetIndex = cardFields.findIndex(f => f.formType == 'related_task' && f?.setting?.isShowSystemFields);
      if (targetIndex !== -1) {
        cardFields[targetIndex].subCardFieldList.map(item=>{
          delete item.isSystem
          item.formType = item.fieldName
        })
        const targetDataArray = cardFields[targetIndex].subCardFieldList || [];
        cardFields.splice(targetIndex + 1, 0, ...targetDataArray);
      }
      return [
        ...cardFields,
        {
          displayName: this.$t('customer.detail.taskCard.fields.operatorName.displayName'),
          fieldName: 'userName'
        },
        {
          displayName: this.$t('customer.detail.taskCard.fields.operateTime.displayName'),
          fieldName: 'updateTime'
        }
      ]
    },
    /** 
    * @description 附加组件实例id
    */
    cardInstanceId() {
      return (this.value?.attribute || {}).id;
    },
    /** 
    * @description 显示编辑按钮(新增)
    * 该单次附加组件无数据时且有新增权限
    */
    showCreateBtn() {
      return !this.cardInstanceId && this.allowCreate;
    },
    /** 
    * @description 显示编辑按钮
    * 该单次附加组件有数据，且有编辑权限
    */
    showEditBtn() {
      return this.cardInstanceId && this.allowEdit;
    },
    /** 
    * @description 显示删除按钮
    * 该单次附加组件有数据时且有删除权限
    */
    showDeleteBtn() {
      return this.cardInstanceId && this.allowDelete;
    }
  },
  data() {
    return {
      isOpenData
    }
  },
  methods: {
    /**
    * @description 打开新增、编辑弹窗
    */
    openDialog() {
      this.action = this.showCreateBtn ? 'create' : 'edit';
      this.$refs.taskCardEdit.openDialog();
    },
    openAddonsDialogAuto() {
      if((this.showCreateBtn || this.showEditBtn) && !this.shareData.isArchive) {
        this.openDialog()
      }
    },
  }
}
</script>